<template>
  <view class="start-index">
    <view v-if="tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower"
		@scroll="scroll" :scroll-top="scrollValue">
        <Comm ref="comm" @changeScrollTop="changeScrollTop"></Comm>
      </scroll-view>
    </view>
    <!-- <tn-tabbar
      v-model="currentIndex"
      :list="tabbarList"
      activeColor="#838383"
      inactiveColor="#AAAAAA"
      activeIconColor="#3668FC"
      :animation="true"
      :safeAreaInsetBottom="true"
      @change="switchTabbar"
    ></tn-tabbar> -->
	<!-- 联系信息 -->
	<contactBox :scroll-top="realScrollValue"></contactBox>
  </view>
</template>

<script>
  import Comm from './comm/comm.vue'
import contactBox from '@/components/contact-box.vue'
  
  export default {
    components: {
      Comm,
	  contactBox
    },
    data() {
      return {
        // 底部tabbar菜单数据
        tabbarList: [
          {
            title: '首页',
            // activeIcon: '/static/tabbar/tn-tabbar0-curnew.png',
            // inactiveIcon: '/static/tabbar/tn-tabbar0.png'
            activeIcon: 'home-in-fill',
            inactiveIcon: 'home-in'
          },
          {
            title: '产品',
            /* activeIcon: '/static/tabbar/tn-tabbar1-curnew.png',
            inactiveIcon: '/static/tabbar/tn-tabbar1.png' */
            activeIcon: 'iot-fill',
            inactiveIcon: 'iot'
          },
          {
            // 服务、案例、品牌、合作、发现、探索
            title: '案例',
            activeIcon: 'reload-planet-fill',
            inactiveIcon: 'rocket',
            activeIconColor: '#FFFFFF',
            inactiveIconColor: '#FFFFFF',
            iconSize: 50,
            out: true
          },
          {
            title: '资讯',
            /* activeIcon: '/static/tabbar/tn-tabbar2-curnew.png',
            inactiveIcon: '/static/tabbar/tn-tabbar2.png' */
            activeIcon: 'topics-fill',
            inactiveIcon: 'topics',
            // count: 12
          },
          {
            title: '我的',
            /* activeIcon: '/static/tabbar/tn-tabbar3-curnew.png',
            inactiveIcon: '/static/tabbar/tn-tabbar3.png' */
            activeIcon: 'my-circle-fill',
            inactiveIcon: 'my-circle'
          }
        ],
        // tabbar当前被选中的序号
        currentIndex: 1,
        // 自定义底栏对应页面的加载情况
        tabberPageLoadFlag: [],
		// scroll滚动距离
		scrollValue: 0,
		realScrollValue: 0,
      }
    },
    onLoad(options) {
      const index = Number(options.index || 1)
      // 根据底部tabbar菜单列表设置对应页面的加载情况
      this.tabberPageLoadFlag = this.tabbarList.map((item, tabbar_index) => {
        return index === tabbar_index
      })
      this.switchTabbar(index)
    },
    methods: {
		// 修改滚动距离
		changeScrollTop(value) {
			this.scrollValue = this.realScrollValue
			this.$nextTick(() => {
				this.scrollValue = value
			})
		},
		scroll(e) {
			this.realScrollValue = e.detail.scrollTop
		},
		  // 切换导航
		  switchTabbar(index) {
			this._switchTabbarPage(index)
		  },
		  
		  // 瀑布流导航页面滚动到底部
		  tabbarPageScrollLower(e) {
			if (this.currentIndex === 1) {
			  this.$refs.comm.getGoodsList && this.$refs.comm.getGoodsList()
			}
		  },

      // 切换导航页面
      _switchTabbarPage(index) {
        wx.vibrateShort();
        const selectPageFlag = this.tabberPageLoadFlag[index]
        if (selectPageFlag === undefined) {
          return
        }
        if (selectPageFlag === false) {
          this.tabberPageLoadFlag[index] = true
        }
        this.currentIndex = index
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>
